<template>
	<view class="app-page safe-area">
		<view class="file-state-img">
			<image class="file-state-icon" mode="scaleToFill" src="@/images/file-state-2.png" />
		</view>
		<view class="role-card">
			<view class="role-avatar color-chu">出</view>
			<view class="role-info">
				<view v-if="mode === 'searchDirect' && roleType == 0" @click="handleDirectLogin" :class="
            [
              'info-status',
              creditor.creditorMemberIdNumber ? 'yesEdit' : 'nologin',
            ]
          ">
					{{ creditor.creditorMemberIdNumber ? "已填写" : "授权" }}
				</view>
				<view v-else :class="
            [
              'info-status',
              creditor.creditorMemberIdNumber ? 'yesEdit' : 'noEdit',
            ]
          ">
					{{ creditor.creditorMemberIdNumber ? "已填写" : "待对方填写" }}
				</view>
				<view class="user-name">
					{{ creditor.creditorMemberName || "出借人姓名" }}
				</view>
				<view class="user-mobile user-item">
					<view class="user-label">电话：</view>
					<view class="user-value" v-if="mode === 'searchDirect' && roleType == 0">
						{{ creditor.creditorMemberPhone || "己方支付宝未授权" }}</view>
					<view class="user-value" v-else>{{
            creditor.creditorMemberPhone || "对方支付宝未授权"
          }}</view>
				</view>
				<view class="user-ID user-item">
					<view class="user-label">身份证：</view>
					<view class="user-value" v-if="mode === 'searchDirect' && roleType == 0">
						{{ creditor.creditorMemberIdNumber || "己方支付宝未授权" }}</view>
					<view class="user-value" v-else>{{
            creditor.creditorMemberIdNumber || "对方支付宝未授权"
          }}</view>
				</view>
			</view>
		</view>
		<view class="role-card" style="margin-bottom: 32rpx">
			<view v-if="mode === 'searchDirect' && roleType == 1" onTap="handleDirectLogin" :class="
          [
            'info-status',
            debtor.debtorMemberIdNumber ? 'yesEdit' : 'nologin',
          ]
        ">
				{{ debtor.debtorMemberIdNumber ? "已填写" : "授权" }}
			</view>
			<view v-else :class="
          [
            'info-status',
            debtor.debtorMemberIdNumber ? 'yesEdit' : 'noEdit',
          ]
        ">
				{{ debtor.debtorMemberIdNumber ? "已填写" : "待对方填写" }}
			</view>

			<view class="role-avatar color-jie">借</view>
			<view class="role-info">
				<view class="user-name">{{
          debtor.debtorMemberName || "借款人姓名"
        }}</view>
				<view class="user-mobile user-item">
					<view class="user-label">电话：</view>
					<view class="user-value" v-if="mode === 'searchDirect' && roleType == 1">
						{{ debtor.debtorMemberPhone || "己方支付宝未授权" }}</view>
					<view class="user-value" v-else>{{
            debtor.debtorMemberPhone || "对方支付宝未授权"
          }}</view>
				</view>
				<view class="user-ID user-item">
					<view class="user-label">身份证：</view>
					<view class="user-value" v-if="mode === 'searchDirect' && roleType == 1">
						{{ debtor.debtorMemberIdNumber || "己方支付宝未授权" }}</view>
					<view class="user-value" a:else>{{
            debtor.debtorMemberIdNumber || "对方支付宝未授权"
          }}</view>
				</view>
			</view>
		</view>
		<form-input class="item-form" label="借款金额" name="loanAmount" required disabled="{{disabled}}" type="number"
			ref="handleRef" placeholder="请输入借款金额">
			<view slot="suffix">元</view>
		</form-input>
		<form-date-picker class="item-form" label="借款日期" arrow name="debtorTime" required disabled="{{disabled}}"
			ref="handleRef" placeholder="请选择借款日期" />
		<form-date-picker class="item-form" label="还款日期" arrow name="repaymentTime" required disabled="{{disabled}}"
			ref="handleRef" placeholder="请选择还款日期" />
		<form-picker class="item-form" label="借款事由" name="borrowingReason" required arrow disabled="{{disabled}}"
			options="{{resionOptions}}" ref="handleRef" placeholder="请输入借款事由" />
		<view class="custom">
			<form-input class="item-form mt30" label="利息" name="contractInterest" type="digit" disabled="{{disabled}}"
				required ref="handleRef" placeholder="请输入利息">
				<view slot="tooltip">
					<ant-icon onTap="handleLixiOpen" type="QuestionCircleOutline" />
				</view>
				<view slot="suffix">元</view>
			</form-input>
			<text a:if="{{ contractInterest }}" class="custom-tip">
				年利率：{{ contractInterest.toFixed(2) }}%
			</text>
		</view>
		<form-input class="item-form" label="逾期利率" name="timeInterest" required disabled="{{disabled}}" type="digit"
			ref="handleRef" placeholder="请输入逾期利率">
			<view slot="suffix">%</view>
		</form-input>

		<view onTap="handlePayWayOpen">
			<form-picker class="item-form mt30 {{disabled?'':'paymentType'}}" label="支付方式" arrow name="paymentType"
				disabled required ref="handleRef" options="{{ paywayOptions }}" placeholder="支付方式">
			</form-picker>
		</view>

		<form-cascader-picker class="item-form mt30 mgl-16" label="管辖法院" arrow disabled="{{disabled}}"
			name="courtAddress" ref="handleRef" options="{{ cityList }}" placeholder="请选择管辖法院" onOk="handleCourtOnOk">
			<view slot="tooltip">
				<ant-icon onTap="handleCourtOpen" type="QuestionCircleOutline" />
			</view>
		</form-cascader-picker>
		<view onTap="handleDebtorAddress" class="debtorAddress">
			<view style="
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 2;
        ">
			</view>
			<form-textarea class="item-form address" label="借款人地址" name="debtorMemberAddress"
				placeholder-class="placeholder-class" ref="handleRef" disabled="{{disabled}}" auto-height="{{true}}"
				placeholder="请输入借款人地址" show-count="{{false}}">
				<!--<view slot="suffix"></view> -->
			</form-textarea>
			<!--<ant-icon type="RightOutline" class="rightOutline"></ant-icon> -->
		</view>
		<view class="{{ showMore?'showMore':'hiddenMore' }}">
			<view class="item-form">
				<form-textarea class="mgl-16 form-textarea" label="备注说明" name="contractRemarks" placeholder="请输入说明"
					disabled="{{disabled}}" allowClear maxLength="{{100}}" position="vertical" ref="handleRef" />
			</view>
			<view class="item-form">
				<view class="item-form-title mgl-16"> 上传出借人身份证 </view>

				<view class="item-form-upload">
					<view class="fontID" data-key="creditorMemberIdNumberFront" onTap="handleUpload">
						<image class="fontImg" mode="aspectFit" default-source="../../images/ID-front.png"
							src="{{formData.creditorMemberIdNumberFront}}" />
						<view class="upload-btn"> 上传人像面 </view>
					</view>
					<view class="backID" data-key="creditorMemberIdNumberBack" onTap="handleUpload">
						<image class="backImg" mode="aspectFit" default-source="../../images/ID-back.png"
							src="{{formData.creditorMemberIdNumberBack}}" />
						<view class="upload-btn"> 上传国徽面 </view>
					</view>
				</view>
			</view>
			<view class="item-form">
				<view class="item-form-title mgl-16"> 上传借款人身份证 </view>
				<view class="item-form-upload">
					<view class="fontID" data-key="debtorMemberIdNumberFront" onTap="handleUpload">
						<image class="fontImg" mode="aspectFit" default-source="../../images/ID-front.png"
							src="{{formData.debtorMemberIdNumberFront}}" />
						<view class="upload-btn"> 上传人像面 </view>
					</view>
					<view class="backID" data-key="debtorMemberIdNumberBack" onTap="handleUpload">
						<image class="backImg" mode="aspectFit" default-source="../../images/ID-back.png"
							src="{{formData.debtorMemberIdNumberBack}}" />
						<view class="upload-btn"> 上传国徽面 </view>
					</view>
				</view>
			</view>
			<view class="item-form">
				<view class="item-form-title mgl-16"> 上传其他材料照片 </view>
				<view class="contractAnnex">
					<view a:for="{{ formData.contractAnnex }}" a:for-index="index" a:for-item="item"
						class="contractAnnex-item" a:key="{{index}}">
						<ant-icon onTap="handleDelAnnex" data-index="{{index}}" class="contractAnnex-close"
							type="CloseOutline">
						</ant-icon>
						<image mode="aspectFit" src="{{item}}" data-index="{{index}}" data-type="change"
							data-key="contractAnnex" onTap="handleUpload" />
					</view>
					<view a:if="{{ formData.contractAnnex.length<9 }}" data-type="add" data-key="contractAnnex"
						class="addIcon" onTap="handleUpload">
					</view>
				</view>
			</view>
			<view class="moreItem-tip">
				身份证、其他材料、凭证图片作为借条的备用材料，可以用于以后下载
			</view>
		</view>
		<view class="moreItem" onTap="handleToggleMore">
			{{ showMore ? "收起" : "更多" }}
			<ant-icon type="{{showMore?'UpOutline':'DownOutline'}}" />
		</view>
		<view class="foot-btns">
			<ant-button onTap="handleBack" className="btn cancel"> 取消 </ant-button>
			<ant-button a:if="{{ !disabled }}" type="primary" onTap="handleSubmit" className="btn">
				保存并预览借条
			</ant-button>
			<ant-button a:else type="primary" onTap="handleSubmit" className="btn">
				确认
			</ant-button>
		</view>
		<!-- 利息弹层 -->
		<ant-modal title="关于利息" visible="{{ lixiBodyVisible }}" primaryButtonText="我知道了"
			onPrimaryButtonTap="handleLixiClose" onClose="handleLixiClose">
			<view slot="content" class="lixi-content">
				根据国家相关法律要求，避免你承受额外的风险，签鸽限制年利率
				<text>不可超过12%</text>
				，年利率计算方式如下：
				<view class="computedMode"> [(利息/借款金额)/(还款时间)]*360 </view>
			</view>
		</ant-modal>
		<!-- 利息弹层 -->
		<!-- 管辖法院说明弹层 -->
		<ant-modal title="管辖法院说明" visible="{{ courtBodyVisible }}" primaryButtonText="我知道了"
			onPrimaryButtonTap="handleCourtClose" onClose="handleCourtClose">
			<view slot="content" class="curt-content">
				<text>签鸽提示</text>
				：建议地域管辖约定在出借人所在地 (区县级) 人民法院管辖。 法条依据:
				《中华人民共和国民事诉讼法》第二十四条因合同纠纷提起的诉讼，由被告住所地或者合同房行地人民法院管辖。第三十五条
				合同或者其他财产权益纠纷的当事人可以书面协议选择被告住所地、合同履行地、合同签订地、原告住所地、标的物所在地等与争议有实际联系的地点的人民法院管辖，但不得违反本法对级别管辖和专属管辖的规定……
			</view>
		</ant-modal>
		<!-- 管辖法院说明弹层 -->

		<!-- 付款方式弹层 -->
		<popup visible="{{payWayShow}}" maskClosable="{{false}}" position="bottom" animation="{{true}}"
			onClose="handlePayWayClose" showCloseIcon="{{false}}">
			<view class="payWay-content safe-area">
				<ant-icon onTap="handlePayWayClose" class="payWay-close" type="CloseOutline">
				</ant-icon>
				<view class="payWay-title"> 选择支付方式 </view>
				<view class="way-tip"> 借款未支付 </view>
				<view class="way-list">
					<!--<view class="way" data-type="alipay" onTap="handleChangePayWay"><image class="way-icon" mode="scaleToFill" src="../../images/ali.png" /><view class="way-info"><view class="way-name">
              支付宝转账</view><view class="way-desc">
              借条签署完成后，支付宝转账</view></view><image
            a:if="{{ formData.paymentType === 'alipay' }}"
            class="way-check-icon"
            mode="scaleToFill"
            src="../../images/check.png"
          /><image a:else class="way-check-icon" mode="scaleToFill" src="../../images/nocheck.png" /></view> -->
					<view class="way" data-type="other" onTap="handleChangePayWay">
						<image class="way-icon" mode="scaleToFill" src="../../images/other.png" />
						<view class="way-info">
							<view class="way-name"> 其他方式支付 </view>
							<view class="way-desc">
								借条签署完成后，微信、银行卡等方式支付
							</view>
						</view>
						<image a:if="{{ formData.paymentType === 'other' }}" class="way-check-icon" mode="scaleToFill"
							src="../../images/check.png" />
						<image a:else class="way-check-icon" mode="scaleToFill" src="../../images/nocheck.png" />
					</view>
				</view>
				<view class="way-tip"> 借款已支付 </view>
				<view class="way-list">
					<view class="way" data-type="overPay" onTap="handleChangePayWay">
						<image class="way-icon" mode="scaleToFill" src="../../images/other.png" />
						<view class="way-info">
							<view class="way-name"> 借款已支付 </view>
							<view class="way-desc"> 补签借条，可上传支付凭证 </view>
						</view>
						<image a:if="{{ formData.paymentType === 'overPay' }}" class="way-check-icon" mode="scaleToFill"
							src="../../images/check.png" />
						<image a:else class="way-check-icon" mode="scaleToFill" src="../../images/nocheck.png" />
					</view>
				</view>
				<view class="payWay-foot" onTap="handlePayWaySave"> 确定 </view>
			</view>
		</popup>
		<!-- 付款方式弹层 -->
		<!-- 拍照弹层 -->
		<uni-popup visible="{{uploadPopupShow}}" maskClosable="{{false}}" position="bottom" animation="{{true}}"
			onClose="handleUploadPopupClose" showCloseIcon="{{false}}">
			<view class="upload-content safe-area">
				<view class="upload-title"> 选择拍照方式 </view>
				<grid items="{{uploadTyps}}" onTap="handleUploadItem" columns="{{2}}" iconSize="90">
				</grid>
				<view class="upload-foot" onTap="handleUploadPopupClose"> 取消 </view>
			</view>
		</uni-popup>
		<upload ref="handleRef_upload" onUpload="onUploadSuccess" safeArea="{{true}}" />

		<!-- 拍照弹层 -->
		<auth-login ref="handleRef_authLogin" onLogin="handleLoginSuccess" />
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {};
		},
		mounted() {},
		methods: {},
	};
</script>
<style lang="scss" scoped></style>